<script setup>
import Header from './header.vue'
import Charts from './charts.vue'
import ChartsTab from './chartstab.vue'
import Banner from './banner.vue'
import Recommend from './recommend.vue'
import { onMounted, ref } from 'vue'

let showSpread = ref('true'); // 开屏广告隐藏显示标志
let times = ref(5);   // 开屏广告读秒
const play = () => {
   times.value--;
   if(times.value <= 0){
      showSpread.value = false;
   }
}

let timer; 
function autoPlay() {
   timer = setInterval(play,1000);
}

// vue3中mount方法,用来执行组件挂载后初始化的操作
onMounted(autoPlay);

const jump = () => {
   showSpread.value = false;
   clearInterval(timer);
}
</script>

<template>
   <div class="spread" v-if="showSpread">
      <span class="jump" @click="jump()">
         点击跳转 <b>{{ times }}</b>
      </span>
   </div>
   <div v-else>
      <Header />
      <Charts />
      <ChartsTab />
      <Banner />
      <Recommend />
   </div>
</template>

<style scoped></style>